@prefix-cls: ~'inbiz-page-breadcrumb';
.@{prefix-cls} {
  width: 100%;
  overflow: hidden;
  font-size: 14px;
  min-height: 28px;

  .inbiz-page-breadcrumb-list {
    display: flex;
    align-items: center;
    white-space: nowrap;
    .inbiz-page-breadcrumb-list-item {
      margin-right: 5px;
      color: var(--inbiz-color-secondary-text);

      > a {
        display: inline-block;
        padding: 0 8px;
        color: var(--inbiz-color-secondary-text);
        line-height: 28px;
        border-radius: var(--inbiz-border-radius-base);
        border-radius: 4px;
        transition: all ease-in 0.3s;
        &:hover {
          color: var(--inbiz-color-heading);
          background-color: #f5f5f5;
        }
      }

      > span {
        margin-left: 5px;
      }

      &:last-child {
        > a {
          color: var(--inbiz-color-primary);
          &:hover {
            background-color: rgba(var(--inbiz-color-primary-toRGB), 0.15);
          }
        }

        & > .inbiz-page-breadcrumb-xie {
          display: none;
        }
      }
    }

    .inbiz-page-breadcrumb-list-ellipsis {
      display: flex;
      align-items: center;
      height: 28px;
      margin-right: 5px;

      > div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        color: var(--inbiz-color-secondary-text);
        border-radius: 14px;

        &:hover {
          color: var(--inbiz-color-primary);
          background-color: rgba(var(--inbiz-color-primary-toRGB), 0.15);
        }
      }

      > span {
        margin-left: 5px;
        color: var(--inbiz-color-secondary-text);
      }
    }
  }
}

.inbiz-page-breadcrumb-list-ellipsis-dropdown {
  .ant-dropdown-menu {
    padding: 8px;
    .ant-dropdown-menu-item {
      height: 40px;
      border-radius: 2px;
      a {
        color: var(--inbiz-color-text);
      }
    }
  }
}
